<template>
  <div class="PersonalCenter">
    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="UserInfo"
      style="max-width: 460px"
    >
      <el-form-item label="头像">
        <el-upload
          class="PersonalCenter-avatar"
          action="#"
          list-type="picture"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="imgChange"
        >
          <el-image
            v-if="UserInfo.AvatarUrl != 'null'"
            :src="UserInfo.AvatarUrl"
            class="PersonalCenter-avatar-icon"
          />
          <el-icon v-else class="PersonalCenter-avatar-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="UserInfo.userName" />
      </el-form-item>
      <!-- <el-form-item label="密码">
        <el-input/>
      </el-form-item> -->
      <!-- <el-form-item label="邮箱">
        <el-input v-model="UserInfo.userEmail"/>
      </el-form-item> -->
      <el-form-item>
        <el-button type="danger" @click="onSubmit">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.PersonalCenter {
  height: calc(100vh - 120px);
  .PersonalCenter-avatar {
    width: 200px;
    height: 200px;
    display: block;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    .PersonalCenter-avatar-icon {
      font-size: 28px;
      color: #8c939d;
      width: 200px;
      height: 200px;
      text-align: center;
    }
  }
  .PersonalCenter-avatar:hover {
    border-color: var(--el-color-primary);
  }
}
</style>

<script setup>
import { reactive, ref, inject, watch } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { useStore } from "vuex";
const store = useStore();

const axios = inject("axios");

const onSubmit = () => {
  let data = {
    AvatarUrl:
      UserInfo.AvatarUrl == sessionStorage.getItem("AvatarUrl")
        ? null
        : UserInfo.AvatarUrl,
    UserName:
      UserInfo.userName == sessionStorage.getItem("userName")
        ? null
        : UserInfo.userName,
    id: sessionStorage.getItem("userId"),
  };

  axios.post("BBS_User/UpdateUserInfo", data, null, (res) => {
    if (res.state == 200) {
      if (data.UserName != null) {
        sessionStorage.setItem("userName", data.UserName);
      }
      if (data.AvatarUrl != null) {
        sessionStorage.setItem("AvatarUrl", data.AvatarUrl);
      }
      ElMessage.success("修改成功,刷新页面");
    }
  },err=>{
    console.log(err);
  });
};

const imgChange = (file) => {
  console.log(file);
  if (file.raw.type.includes("image/jpeg")) {
    // 检查文件大小是否超过5MB
    if (file.size > 5 * 1024 * 1024) {
      ElMessage.error("图片大小不能超过5MB");
      return;
    }
    fetch(file.url)
      .then((response) => response.blob())
      .then((blob) => {
        // 将Blob数据读取为Base64数据
        const reader = new FileReader();
        reader.onload = () => {
          const base64Data = reader.result;
          UserInfo.AvatarUrl = base64Data;
          console.log(base64Data);
        };
        reader.readAsDataURL(blob);
      })
      .catch((error) => {
        console.error("发生错误", error);
      });
  } else {
    ElMessage.error("只能上传图片");
  }
};

//用户信息
const UserInfo = reactive({
  userName: sessionStorage.getItem("userName"),
  userEmail: sessionStorage.getItem("userEmail"),
  userId: sessionStorage.getItem("userId"),
  AvatarUrl: sessionStorage.getItem("AvatarUrl"),
});
</script>
